<template>
  <view class="page" >
    <!--    <view class="page-search">-->

    <!--      <view class="input">-->
    <!--        <up-search placeholder="请输入查询条件" shape="square" :showAction="false" v-model="keyword" @change="getSearch"></up-search>-->
    <!--      </view>-->

    <!--      <up-tabs :list="tagList" lineColor="#1677FF" :activeStyle="{-->
    <!--					color: '#1677FF',-->
    <!--					fontWeight: 'bolder'-->
    <!--				}" :scrollable="false" @click="tabChange"></up-tabs>-->

    <!--    </view>-->

    <!-- 列表数据 -->
    <view class="page-items" v-if="items.length>0">

      <view v-for="(v, i) in items" :key="i">
        <view class="tip-time">
          <view class="tip-time-text"> 2024-12-01 </view>
        </view>

      <view class="page-item" >
<!--        <view :class="['status', v.status == 2 ? 'success' : '']">{{v.status == 1 ? '未办结' : '已办结'}}</view>-->
        <view class="title u-line-1 line">{{'环创调度单位'}}</view>
        <view class="info">
          <view class="flex">

            <!--						<view class="cover">-->
            <!--							<image class="image" v-if="v.photo" :src="v.photo.split(',')[0]" mode="aspectFill" />-->
            <!--						</view>-->

            <view class="ps">

              <view class="psitem">
                <label>第5465期反诈宣传</label>
              </view>



              <view class="psitem">
                <text >{{'2024-12-01'}}</text>
              </view>
            </view>
          </view>

          <!--					<view class="desc" v-if="v.description">-->
          <!--						<text class="u-line-4">{{v.description}}</text>-->
          <!--					</view>-->
        </view>
        <view class="btns">
           <view class="disInfo">
             <view  @click="clickDetail(v)">查看详情</view>
             <view  @click="clickSettle(v)"> > </view>
           </view>
        </view>
      </view>
      </view>
    </view>

<!--    <view class="page-addButton" @click="clickEdit">-->
<!--      <image src="@/static/post-icon.png" mode="widthFix"></image>-->
<!--    </view>-->

    <up-empty marginTop="120" v-if="items.length <= 0 && !loading" mode="data" text="暂无消息" :width="80" :height="80" icon="https://imgs.ddeke.com/2024/08/01/rT5sB51gU8.png"></up-empty>

  </view>

<!--  <up-empty v-if="items.length<1&&type==2" :marginTop="60" mode="data" text="暂无待办事项" :width="80" :height="80"-->
<!--            icon="https://imgs.ddeke.com/2024/08/01/C5UsP1Ggo6.png">-->
<!--  </up-empty>-->

</template>

<script setup>
import { inspectList, inspectDelete } from '@/api/inspect.js';
import { onShow, onReachBottom } from '@dcloudio/uni-app'
import { ref } from 'vue';
import { toast, showConfirm } from '@/utils/common.js';
import {messageList} from "../api/message";

// import {shopDelete, shopList} from "../../api/shop";

let pageSize = 10;
let pageNum = 1;
let total = 0;
const loading = ref(false);
const tabId = ref(0);
const items = ref([]);
const keyword = ref("");
const tagList = [
  { name: '全部', status: 0 },
  { name: '未整改', status: 1 },
  { name: '已整改', status: 2, }
]

onShow(()=>{
  pageNum = 1;
  getInspectList()
})

onReachBottom(() => {
  if (items.value.length >= total) return;
  getInspectList()
})

const tabChange = ({ status })=>{
  pageNum = 1;
  tabId.value = status
  getInspectList()
}

// 搜索
const getSearch = () => {
  pageNum = 1;
  items.value = [];
  getInspectList();
}

// 获取列表
const getInspectList = () => {
  if (loading.value) return;
  loading.value = true;
  let options = {
    pageSize,
    pageNum
  };
  if (tabId.value != 0) {
    options.status = tabId.value;
  }
  // 搜索参数
  // if (keyword.value.trim() != "") {
  options.name = keyword.value.trim();
  // }

  messageList(options).then(res => {
    loading.value = false;
    if (res.code != 200) {
      toast(res.msg);
      return;
    }

    total = res.total;
    // items.value = pageNum == 1 ? res.rows : items.value.concat(res.rows);
    pageNum = pageNum + 1;

  }).catch(err => {
    loading.value = false;
  })
}





const clickEdit = (v) => {
  uni.navigateTo({ url: v.id ? `/subPackages/shop/edit?id=${v.id}` : `/subPackages/shop/edit` })
}

const clickSettle = (v) => {
  uni.navigateTo({ url: v.id ? `/subPackages/shop/deal?id=${v.id}` : `/subPackages/shop/edit` })
}

const clickDetail = (e) => {
  uni.navigateTo({ url: `/subPackages/shop/info?id=${e.id}` })
}
</script>

<style lang="scss" scoped>

.tip-time{
  width: 100%;
  display: flex;
  justify-content: center;
  &-text{
    padding: 5rpx 10rpx;
    background-color: #c4c4c4;
    width: 190rpx;
    border-radius: 15rpx;
    font-size: 26rpx;
    color: white;
    text-align: center;
    margin: 15rpx;
  }
}
.line{
  padding: 24rpx;
  border-bottom: 1rpx solid rgba(0,0,0,0.06);
}
.disInfo{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.page {
  padding-bottom: 40rpx 0  calc(120rpx + env(safe-area-inset-bottom)) 0;
  &-search {
    background: #fff;
    padding-bottom: 12rpx;
    position: sticky;
    top: 0;
    z-index: 100;
    .input {
      padding: 12rpx 24rpx;
      border: 1rpx solid rgba(0,0,0,0.06);
    }
  }

  &-items {
    padding: 204rpx 0;
  }

  &-item {
    border-radius: 16rpx;
    background: #FFF;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0,0,0,0.05);
    width: 684rpx;
    margin: 0 auto;
    margin-bottom: 24rpx;
    box-sizing: border-box;
    position: relative;
    .status {
      display: inline-block;
      min-width: 76rpx;
      line-height: 32rpx;
      background: #FFF4D1;
      border-radius: 4rpx;
      font-size: 20rpx;
      color: #F27900;
      text-align: center;
      position: absolute;
      right: 32rpx;
      top: 36rpx;
      &.success {
        color: #1677FF;
        background: rgba(22,119,255,0.1);
      }
    }
    .title {
      width: 480rpx;
      line-height: 35rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(0,0,0,0.85);

    }
    .info {
      padding: 24rpx 32rpx;
      border-bottom: 1rpx solid rgba(0,0,0,0.06);
    }
    .flex {
      display: flex;
    }
    .cover {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      overflow: hidden;
      background: #D8D8D8;
      margin-right: 24rpx;
      .image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8rpx;
      }
    }
    .ps {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .psitem {
      display: flex;
      margin-bottom: 16rpx;
    }
    .psitem label {
      width: auto;
      font-size: 32rpx;
      //color: rgba(0,0,0,0.45);
      line-height: 40rpx;
      margin-right: 24rpx;
      font-weight: bold;
    }
    .psitem text {
      font-size: 25rpx;
      color: rgba(0,0,0,0.85);
      line-height: 40rpx;
      flex: 1;
      color: #adacac;
    }
    .desc {
      background: rgba(0,0,0,0.04);
      border-radius: 8rpx;
      padding: 24rpx;
      font-size: 28rpx;
      color: rgba(0,0,0,0.85);
      line-height: 40rpx;
    }
    .btns {
      padding: 24rpx 32rpx;
      //display: flex;
      //justify-content: flex-end;
    }
    .btn {
      min-width: 120rpx;
      height: 56rpx;
      background: #FFFFFF;
      border-radius: 8rpx;
      border: 1rpx solid #E5E5E5;
      font-size: 28rpx;
      color: rgba(0,0,0,0.65);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 24rpx;
      &.primary {
        background: #1677FF;
        color: #FFF;
        border: none;
      }
    }
  }

  &-addButton {
    position: fixed;
    bottom: 136rpx;
    right: 32rpx;
    border-radius: 50%;
    width: 120rpx;
    height: 120rpx;
    background: #1677FF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(22,119,255,0.5);
    image {
      width: 48rpx;
      height: 48rpx;
    }
  }
}


</style>